@each $i in 0 5 10 15 20 25 30 35 40 45 50 {
    $var: $i + rpx;

    .mt-#{$i} {
        margin-top: $var;
    }

    .mb-#{$i} {
        margin-bottom: $var;
    }

    .ml-#{$i} {
        margin-left: $var;
    }

    .mr-#{$i} {
        margin-right: $var;
    }

    .pt-#{$i} {
        padding-top: $var;
    }

    .pb-#{$i} {
        padding-bottom: $var;
    }

    .pl-#{$i} {
        padding-left: $var;
    }

    .pr-#{$i} {
        padding-right: $var;
    }

}

.flex {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;

    .flex-item {
        flex: 1;
    }

    .flex-align {
        align-items: center;

    }
    .flex-center {
        justify-content: center;
    }
    .flex-between {
        justify-content: space-between;
    }

    .flex-around {
        justify-content: space-around;
    }

    .flex-col {
        flex-direction: column;
    }

}